<template>
    <Row type="flex" justify="center" align="middle" class="login" @keydown.enter.native="submitLogin">
        <Col :xs="{span:22}" style="width: 368px;">
            <Row class="header">
                <img src="../../assets/meida.png" width="220px"/>
                <div class="description">勤博教育</div>
            </Row>

            <Row class="login-form">
                <Tabs v-model="tabName">
                    <TabPane label="绑定手机号" name="username" icon="md-person-add">
                        <Form ref="usernameLoginForm" :model="form" :rules="rules" class="form">
                            <FormItem prop="mobile">
                                <Input v-model="form.mobile" prefix="ios-contact" size="large" clearable placeholder="请输入手机号" autocomplete="off"/>
                            </FormItem>
                            <FormItem prop="smsCode">
                                <Row type="flex" justify="space-between" class="code-row-bg">
                                    <Input v-model="form.smsCode" prefix="ios-mail-outline" size="large" clearable placeholder="请输入短信验证码" :maxlength="maxLength" class="input-verify" />
                                    <Button size="large" :loading="sending" @click="sendVerify" v-if="!sended" class="send-verify">
                                        <span v-if="!sending">获取验证码</span>
                                        <span v-else>发送中</span>
                                    </Button>
                                    <Button size="large" disabled v-if="sended" class="count-verify">{{countButton}}</Button>
                                </Row>
                            </FormItem>
                            <FormItem>
                                <div style="width: 100%;height: 36px;">
                                    <div id="vaptchaContainer"></div>
                                    <div v-if="loadingVaptcha" class="vaptcha-init-main">
                                        <div class="vaptcha-loading">
                                            <img src="@/assets/vaptcha-loading.gif"/>
                                            <span class="vaptcha-text">Vaptcha启动中...</span>
                                        </div>
                                    </div>
                                </div>
                            </FormItem>
                        </Form>
                    </TabPane>
                </Tabs>

                <Row>
                    <Button type="primary" size="large" :loading="loading" @click="submitLogin" long>
                        <span v-if="!loading">立即绑定</span>
                        <span v-else>绑定中...</span>
                    </Button>
                </Row>
                <Row type="flex" justify="space-between" class="code-row-bg other-login">
                    <a @click="$router.go(-1)" class="forget-pass">
                        <Icon type="md-arrow-round-back" style="margin-bottom:3px;"/>
                        返回</a>
                    <router-link to="/regist"><a class="forget-pass">还没有账号？立即注册</a></router-link>
                </Row>
            </Row>

            <Row class="foot">
                <Row type="flex" justify="space-around" class="code-row-bg help">
                    <a class="item" href="" target="_blank">帮助</a>
                    <a class="item" href="" target="_blank">隐私</a>
                    <a class="item" href="" target="_blank">条款</a>
                </Row>
                <Row type="flex" justify="center" class="code-row-bg copyright">
                    Copyright © 2018-Present <a href="#" target="_blank" style="margin:0 5px;"></a> 版权所有
                </Row>
            </Row>
        </Col>
    </Row>
</template>

<script>
    import Cookies from "js-cookie";
    import {login,relate, sendSms,userInfo, getJWT} from "@/api/index";
    import { Encrypt, Decrypt } from '@/libs/des'
    import util from "@/libs/util.js";

    var vaptchaObject;
    export default {
        data() {
            return {
                tabName: "username",
                loadingVaptcha: true,
                loading: false,
                verified: false,
                sended: false,
                sending: false,
                count: 60,
                countButton: "60 s",
                maxLength: 6,
                errorCode: "",
                form: {
                    mobile: "",
                    smsCode: "",
                    token: "",
                    accountId: null
                },
                loginform: {
                    username: "",
                    password: "",
                    saveLogin: true
                },
                rules: {
                    mobile: [
                        {
                            required: true,
                            message: "手机号不能为空",
                            trigger: "blur"
                        }
                    ],
                    smsCode: [
                        {
                            required: true,
                            message: "验证码不能为空",
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        methods: {
            submitLogin() {
                if (this.tabName === "username") {
                    this.$refs.usernameLoginForm.validate(valid => {
                        if (valid) {
                            if (!this.verified) {
                                this.$Message.error("您还没有完成验证");
                                return;
                            }
                            this.loading = true;
                            relate(this.form).then(res => {
                                if (res.status === true) {
                                    // 获取JWT
                                    login(this.loginform).then(res => {
                                        if (res.success) {
                                            this.setStore("accessToken", res.data.access_token);
                                            this.$Message.success("绑定成功");
                                            // 获取用户信息
                                            userInfo().then(res => {
                                                if (res.status === true) {
                                                    // 避免超过大小限制
                                                    delete res.data.authorities;
                                                    let roles = [];
                                                    var userInfo = res.data;
                                                    res.data.roles.forEach(role => {
                                                        roles.push(role.code);
                                                    });
                                                    this.setStore("roles", roles);
                                                    if (this.saveLogin) {
                                                        // 保存7天
                                                        Cookies.set("userInfo", JSON.stringify(userInfo), {
                                                            expires: 7
                                                        });
                                                    } else {
                                                        Cookies.set("userInfo", JSON.stringify(userInfo));
                                                    }
                                                    this.setStore("userInfo", userInfo);
                                                    this.$store.commit("setAvatarPath", userInfo.avatar);
                                                    // 加载菜单
                                                    util.initRouter(this);
                                                    this.$router.push({
                                                        name: "home_index"
                                                    });
                                                } else {
                                                    this.loading = false;
                                                }
                                            });
                                        } else {
                                            this.loading = false;
                                        }
                                    });
                                } else {
                                    this.$Message.success("绑定失败");
                                    this.loading = false;
                                    vaptchaObject.reset();
                                    this.verified = false;
                                }
                            });
                        }
                    });
                }
            },
            sendVerify() {

                    if (this.form.mobile!="") {
                        this.sending = true;
                        sendSms({mobile:Encrypt(this.form.mobile)}).then(res => {
                            this.sending = false;
                            if (res.status===true) {
                                this.$Message.success("发送短信验证码成功");
                                this.sended = true;
                                this.countDown();
                            }
                        });
                    }else{
                        this.$Message.success("请输入手机号");
                    }

            },
            countDown() {
                let that = this;
                if (this.count === 0) {
                    this.sended = false;
                    this.count = 60;
                    return;
                } else {
                    this.countButton = this.count + " s";
                    this.count--;
                }
                setTimeout(function() {
                    that.countDown();
                }, 1000);
            },
            initVaptcha() {
                let that = this;
                vaptcha({
                    //配置参数
                    vid: "5c9f311bfc650ed840ee71e7", // 验证单元id
                    type: "click", // 展现类型 点击式
                    container: "#vaptchaContainer"
                }).then(function (vaptchaObj) {
                    vaptchaObject = vaptchaObj;
                    vaptchaObj.render(); // 加载验证按钮
                    that.loadingVaptcha = false;
                    vaptchaObj.listen("pass", function () {
                        // 验证成功
                        that.verified = true;
                        that.form.token = vaptchaObj.getToken();
                    });
                });
            }
        },
        mounted() {
            let q = this.$route.query;
            this.form.accountId = q.accountId;
            this.loginform.username = q.username;
            this.loginform.password = q.password;
            this.initVaptcha();
        }
    };
</script>

<style lang="less">
    @import "relate.less";
</style>
